<!--历史任务-->

<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 20px">
      <h5>采购方式</h5>
      <el-select v-model="procurementMethod" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
        <el-option :key="''" :label="'全部'" :value="''"></el-option>
        <el-option :key="'磋商'" :label="'磋商'" :value="'磋商'"></el-option>
        <el-option :key="'委托'" :label="'委托'" :value="'委托'"></el-option>
        <el-option :key="'竞价'" :label="'竞价'" :value="'竞价'"></el-option>
      </el-select>
      <h5 style="margin-left: 30px">项目编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目编号" v-model="projectNumber"></el-input>
      <h5 style="margin-left: 30px">项目名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入项目名称" v-model="projectName" ></el-input>

      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex;margin-top: 20px">
      <el-table :data="tableData" style="width: 100%" height="400">
        <el-table-column fixed label="序号" width="45">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectNumber" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="45"></el-table-column>
        <el-table-column prop="budget" label="预算（万元）"></el-table-column>
        <el-table-column prop="procurementType" label="采购类型">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementType === '公开采购'">公开采购</span>
            <span v-else-if="scope.row.procurementType === '单一来源'">单一来源</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="fundingSource" label="资金来源">
          <template slot-scope="scope">
            <span v-if="scope.row.fundingSource === '预算'">预算</span>
            <span v-else-if="scope.row.fundingSource === '拨款'">拨款</span>
            <span v-else-if="scope.row.fundingSource === '其他'">其他</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyingDepartment" label="申请科室"></el-table-column>
        <el-table-column prop="procurementMethod" label="采购方式">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementMethod === '磋商'">磋商</span>
            <span v-else-if="scope.row.procurementMethod === '委托'">委托</span>
            <span v-else-if="scope.row.procurementMethod === '竞价'">竞价</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectType" label="项目类型">
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '工程'">工程</span>
            <span v-else-if="scope.row.projectType === '耗材'">耗材</span>
            <span v-else-if="scope.row.projectType === '设备'">设备</span>
            <span v-else-if="scope.row.projectType === '维护'">维护</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="tenderOfficer" label="招标责任人"></el-table-column>
        <el-table-column prop="dealer" label="中标单位" width="120"></el-table-column>
        <el-table-column prop="finalMoney" label="中标金额"></el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 900px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getHistoProjectPage} from "@/api/project";

export default {
  name: "HistoTask",
  data() {
    return {
      tableData: [],
      projectNumber: "",
      projectName: "",
      procurementMethod: "",
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getHistoProjectPage(this.pageNum,this.pageSize, this.projectNumber, this.projectName, this.procurementMethod).then(res => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    reset() {
      this.projectNumber = ""
      this.projectName = ""
      this.procurementMethod = ""
      this.init()
    },
  }
}
</script>

<style scoped>

</style>